iT邦幫忙

2022 iThome 鐵人賽

DAY 20
0

在前面幾天,我們介紹到了ReactDOMclient,今天我們要介紹的就是同樣屬於reactAPI裡面的一員,ReactDOMServer!


https://ithelp.ithome.com.tw/upload/images/20221001/20152220SF5evAUPSK.png

ReactDOMServer:
ReactDOMServer的功能是可以將你的COMPONENT渲染到你的介面,通常是用在節點服務器上的

import * as ReactDOMServer from 'react-dom/server';
var ReactDOMServer = require('react-dom/server');

我們來介紹幾個範例
renderToReadableStream()
ReactDOMServer.renderToReadableStream(element, options);
renderToReadableStream 將 React element傳輸到其初始 HTML。返回解析為可讀Stream的 Promise

renderToString()
ReactDOMServer.renderToString(element)
功能是將html初始化,接著React 將返回一個 HTML 字符串。

renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)
這個方法比較類似於renderToString,但是這個方法不會創建React 內部使用的額外 DOM ,例如data-reactroot. 將 React 用作簡單的靜態頁面生成器可以節省一些字節。

參考文章
https://zh-hant.reactjs.org/docs/react-dom-server.html


上一篇
[DAY19]Controlled & Uncontrolled Component 是啥???
下一篇
[DAY21]生命週期方法-WillMount、componentDidMount
系列文
進階前端網頁設計-初心者的30天React學習及應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言